<template>
    <div id="container" style="height: 100%"></div>

</template>

<script>
    import * as echarts from 'echarts';
    // eslint-disable-next-line no-unused-vars
    import {request} from '@/axios/request'
    export default {
        name: "echarts",
        data(){
          return{

          }
        },
        mounted(){
            this.drawChart();
        },
        methods:{
            drawChart(){
                var dom = document.getElementById('container');
                var myChart = echarts.init(dom, null, {
                    renderer: 'canvas',
                    useDirtyRect: false
                });
                var app = {};

                var option;

                option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }
                    ]
                };

                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }

                window.addEventListener('resize', myChart.resize);
            },


        },
        created() {

        }
    }
</script>

<style scoped>

</style>
